<template>
    <div class="login-index">
            <el-form
                    v-loading="loading"
                    element-loading-text="正在登录...."
                    element-loading-spinner="el-icon-loading"
                    element-loading-background="rgba(0, 0, 0, 0.8)"
                    :model="loginform"
                    ref="loginForm"
                    :rules="loginRules"
                    class="loginContainer">
                <h3 class="login-title">一瓶奶博客管理系统</h3>
                <el-form-item label="用户名：" prop="username" label-position="right" label-width="80px">
                    <el-input v-model="loginform.username" placeholder="请输入用户名" style="width: 250px"></el-input>
                </el-form-item>
                <el-form-item label="密     码：" prop="password"  label-position="right" label-width="80px">
                    <el-input type="password" v-model="loginform.password" placeholder="请输入密码" style="width: 250px"></el-input>
                </el-form-item>
                <el-form-item  prop="code" style="margin-left: 80px">
                    <el-input @keydown.enter.native = "submitLogin" type="text" style="width: 150px;" v-model="loginform.code" placeholder="请输入验证码"></el-input>
                    <img :src="vcUrl" @click="updateVerifyCode" alt="" style="cursor: pointer;margin-left: 10px">
                </el-form-item>
                <el-button type="primary" style="margin-left: 80px" @click="submitLogin">登录</el-button>
            </el-form>
    </div>
</template>

<script>

    export default {
        name: "Login",
        data(){
            return {
                loading : false,
                vcUrl: '/verifyCode?time='+new Date(),
                rebPassword:'',
                loginform : {
                    username : '',
                    password : '',
                    code : '',
                },
                loginRules:{
                    username:[{required:true,message:'请输入用户名',trigger:'blur'}],
                    password:[{required:true,message:'请输入密码',trigger:'blur'}],
                    code: [{required: true, message: '请输入验证码', trigger: 'blur'}]
                }


            }
        },
        methods:{
            updateVerifyCode() {
                this.vcUrl = '/verifyCode?time='+new Date();
            },
            submitLogin(){
                this.$refs.loginForm.validate((valid) => {//获取表单进行校验  校验通过后
                    if (valid) {
                        this.loading = true;
                        this.rebPassword = this.loginform.password;
                        this.loginform.password = this.$md5(this.loginform.password);
                        this.postKeyValueRequest('/admin/login',this.loginform).then(resp =>{
                            this.loading = false;
                            if(resp){
                                window.sessionStorage.setItem("user",JSON.stringify(resp.obj));
                                this.$router.replace('/admin');
                            }else{
                                this.loginform.password= this.rebPassword;
                                this.vcUrl = '/verifyCode?time='+new Date();
                                this.loginform.code = '';
                            }
                            this.loading = false;
                        })
                    } else {
                        this.$message.error('请输入所有字段');
                        return false;
                    }
                });
            }
        }
    }
</script>

<style>
    .loginContainer{
        border-radius: 15px;
        margin: 180px auto;
        width: 400px;
        padding: 10px 30px 20px 40px;
        background: #fff;
        border:1px solid #eaeaea;
        box-shadow: 0 0 25px #cac6c6;
    }
    .login-title{
        margin: 15px auto;
        font-size: 24px;
        text-align: center;
        color: #505458;
    }
    .el-form-item__content{
        display: flex;
        align-items: center;
    }
    .login-index{
        background-image: url("../../../../public/login.jpg");
        background-size: 100%;
        width: 100%;
        height: 100%;
        overflow: hidden
    }
</style>